<script setup lang="ts">
import StackOpBtnWrapper from "@renderer/view/components/OpBtnWrapper/StackOpBtnWrapper.vue";
import SliceIndexSlider from "@renderer/view/quick/SliceIndexSlider.vue";
import { computed, provide, ref } from "vue";

import QuickImgManager from "@renderer/view/quick/QuickImgManager.vue";
import { useViewManagerStore } from "@renderer/store/pinia/viewManager";
import { useGetCurrentView } from "@renderer/view/hooks/common";
import { useImageDataStore } from "@renderer/store/pinia/imageData";
import { EnumViewMode } from "@renderer/assets/types";

const gotImgRef = ref(false);

const imageStore = useImageDataStore();

const currentViewSliceInfo = computed(() => {
  if (imageStore.sliceInfoObj[activeView.value?.viewId]) {
    return imageStore.sliceInfoObj[activeView.value.viewId];
  }
  return {
    total: 0,
    current: 0,
  };
});

const viewStore = useViewManagerStore();
const { tabId } = useGetCurrentView();
const activeView = computed(() => {
  if (viewStore.tabActiveViewIdObj[tabId]){
    return viewStore.tabActiveViewIdObj[tabId]
  }
  return {
    viewId: '',
    viewMode: EnumViewMode.quick,
  }
});


const renderSliceIndexFlag = computed(() => {
  return currentViewSliceInfo.value?.total
})

provide("tabInfo", {
  gotImg: gotImgRef,
  activeView: activeView,
  currentViewSliceInfo: currentViewSliceInfo,
  tabId,
});
</script>

<template>
  <div class="w-full h-full flex flex-col position-relative">
    <stack-op-btn-wrapper class="flex-shrink-0" />
    <div class="flex-1 flex overflow-hidden">
      <div class="flex-1 h-full p-[5px]!">
        <QuickImgManager />
      </div>
      <div class="w-[50px] h-[calc(100%-50px)]" >
          <slice-index-slider v-if="renderSliceIndexFlag" />
      </div>
    </div>
    <!--  TODO   -->
    <!--    <div v-if="imgSrcRef === ''" class="w-full h-full position-absolute left-0 top-0">-->
    <!--      <v-overlay-->
    <!--        :model-value="true"-->
    <!--        :opacity="20"-->
    <!--        class="align-center justify-center"-->
    <!--        contained-->
    <!--      >-->
    <!--        <v-progress-circular-->
    <!--          color="primary"-->
    <!--          size="64"-->
    <!--          indeterminate-->
    <!--        ></v-progress-circular>-->
    <!--      </v-overlay>-->
    <!--    </div>-->
  </div>
</template>

<style scoped>
.custom-slider ::v-deep.v-input--vertical > .v-input__control {
  @apply h-full;
}

.custom-slider ::v-deep.v-input--vertical > .v-input__details {
  display: none;
}
</style>
